<template>
	<view class="container">
		<view class="search">
			<view class="searchbar">
				<view class="search-input">
					<image src="../../static/search.png"></image>
					<i class="icon icon-search"></i>
					<input type="text" @confirm="searchGoods" confirm-type="search" style="padding-left: 30px;" v-model="inputvalue">
				</view>
			</view>
		</view>
		<view class="content clear" :class="!liststyle ? '' : 'liststyle'" style="padding-top: 40px;display:none;" :style="{'display': show_hide}">
			<view v-for="(item,index) in res" :key="index"  @tap="opendetail" :data-newsid="item.id">
				<view class="list">
					<view class="imgbox">
						<image class="image" :src="item.thumb"></image>
					</view>
					<view class="detail">
						<view class="name">{{item.title}}</view>
						<view class="productprice">¥{{item.productprice}}</view>
						<view class="price">
							<view class="text">¥{{item.marketprice}}</view>
							<view class="buy">
								<image src="http://mall.zhongzhengyicai.com/attachment/images/5/2018/10/jifen.png"></image>
							</view>
						</view>
					</view>
						<view class="buy-btn">
							<button class="mini-btn buybutton" >购买</button>
						</view>
				</view>
			</view>
		</view>
		
		<view :style="{'display': show_hide_content}">
			<view class="page-body">
				<scroll-view class="nav-left" scroll-y :style="'height:'+height+'px'">
					<view class="nav-left-item" @click="categoryClickMain(item,index)" :key="index" :class="index==categoryActive?'active':''" v-for="(item,index) in categoryList">
						{{item.name}}
					</view>
				</scroll-view>
				<scroll-view class="nav-right" scroll-y :scroll-top="scrollTop" @scroll="scroll" :style="'height:'+height+'px'" scroll-with-animation>
					<view :id="index===0?'first':''" class="nav-right-item" v-for="(item,index) in subCategoryList" :key="index" @click="jump" :data-id="item.id">
						<image :src="item.thumb" />
						<view class="ellipsis-2">{{item.name}}</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputvalue:'',
				show_hide_content:'block',
				show_hide: 'none',
				res:[],
				categoryList: [],
				subCategoryList: [],
				height: 0,
				categoryActive: 0,
				scrollTop: 0,
				scrollHeight: 0,
				liststyle:false,
			}
		},
		onLoad: function () {
			uni.showLoading()
			this.setAjax();
			this.height = uni.getSystemInfoSync().windowHeight -45;
		},
		methods: {
			scroll(e) {
				this.scrollHeight = e.detail.scrollHeight;
			},
			categoryClickMain(categroy, index) {
				console.log(categroy)
				console.log(this.categoryList[0])
				this.categoryActive = index;
				this.subCategoryList = categroy.subCategoryList;
				this.scrollTop = -this.scrollHeight * index;
			},
			setAjax() {
				uni.request({
					url: 'http://mall.zhongzhengyicai.com/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=shop.category&app=1',
					success: res => {
					uni.hideLoading()
						console.log(JSON.stringify(res.data.tuijian))
						var p = res.data.category.parent[0]
						var c = res.data.category.children
						var tj = [{
							"id":"0",
							"name":"所有商品",
							"thumb":'../../static/list.jpg'}]
							for(var i in res.data.tuijian){
								tj.push(res.data.tuijian[i])
							}
						this.categoryList.push({
							"id":"0",
							"name":"推荐分类",
							"subCategoryList":tj,
						})
						for(var i in p){
							this.categoryList.push({
								'id':p[i].id,
								"name": p[i].name,
								'subCategoryList':[]
							})
						}
						for(var a in c){
							for(var j in this.categoryList){
								if(this.categoryList[j].id == a){
									this.categoryList[j].subCategoryList = c[a]
								}
							}
						}
						this.categoryClickMain(this.categoryList[0], 0)
					},
					fail: () => {},
					complete: () => {}
				});
				
			},
			jump(e){
				var id = e.currentTarget.dataset.id
				uni.navigateTo({
					url: '../goods/goods?cate='+id
				});
			},
			searchGoods(e){
				uni.showLoading()
				uni.request({
					url: 'http://mall.zhongzhengyicai.com/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=goods.get_list&keywords=&isrecommand=&ishot=&isnew=&isdiscount=&issendfree=&istime=&order=&by=&merchid=&page=1&keywords='+e.mp.detail.value,
					method: 'GET',
					success: res => {
						if(this.inputvalue== '') {
							uni.navigateBack();
							return
						}
						this.res = res.data.result.list;
						console.log(this.res)
						
						// if(res.data.result.total > res.data.result.pagesize){
						// 	this.load = 1
						// }
						
						this.show_hide = 'block'
						this.show_hide_content = 'none'
						uni.hideLoading();
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
.page-body{display:flex;}.nav{display:flex;width:100%;}.nav-left{width:30%;background:#f8f8f8;}.nav-left-item{height:78upx;font-size:26upx;display:flex;align-items:center;justify-content:center;color:#666;}.nav-right{width:70%;background:#fff;}.nav-right-item{width:28%;height:180upx;float:left;text-align:center;padding:11upx;font-size:28upx;}.nav-right-item view{font-size:24upx;line-height:30upx;}.nav-right-item image{width:100upx;height:100upx;border-radius:50%;background:#eebc06;}.active{background:#fff;position:relative;color:#eebc06;font-weight: 555;}.active:before{width:0;height:100%;content:" ";position:absolute;top:0;left:0;border-left:4upx solid #000;}.searchbar{padding:20upx 0;overflow:hidden;height:56upx;-webkit-box-align:center;-webkit-align-items:center;align-items:center;position:relative;padding:16upx;background:#fff;border-bottom:2upx solid #eee;}.searchbar .search-input{-webkit-transform:translate3d(0,50,0);transform:translate3d(0,50,0);-webkit-transition:all .3s;transition:all .3s;margin-right:0;position:relative;}.search-input image{position:absolute;width:36upx;height:36upx;top:10upx;left:10upx;}.search-input input{border:0;background:#efefef;margin:0;height:56upx;padding-left:56upx;border-radius:10upx;}
.content{padding:8upx;}.list{padding:10upx;width:346upx;float:left;}.imgbox{height:346upx;}.image{width:346upx;height:346upx;}.detail{padding:20upx;background:#eebc06;}.buy-btn:after{display:block;content:"";clear:both;}.buy-btn{background:#fff;padding-right:20upx;padding-bottom:20upx;}.name{height:68upx;font-size:26upx;line-height:34upx;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}.productprice{line-height:48upx;font-size:24upx;color:#999;text-decoration:line-through;}.price,.buy{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.price .text{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;color:#000;font-size:30upx;line-height:38upx;}.price text{color:#000}.price image{width:38upx;height:38upx;display:block;margin-right:5upx;position:relative;top:-2upx;}.buy text{line-height:38upx;}.liststyle{padding:0;}.liststyle .list{width:710upx;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#fff;height:196upx;padding:20upx;float:inherit;border-bottom:2upx solid #e7e7e7;}.liststyle .imgbox{height:196upx;background:#fff;}.liststyle .detail{height:156upx;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}.liststyle .list .image{width:160upx;height:160upx;margin-top:18upx;}.liststyle .buy-btn{padding:0;padding-top:74upx;}.buybutton{width:90upx;height:48upx;float:right;border:1px solid #000;color:#000;padding:0 15upx;background:#fff;line-height:44upx;font-size:24upx;}
</style>